<template>
	<view>
		<view class="search">
			<u-search height="30" :clearabled="true" :show-action="true" placeholder="请输入医院名称" actionText="搜索" :animation="true" shape="round" v-model="keyword"></u-search>
		</view>
		
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in banners" :key="index">
					<view class="swiper-item uni-bg-red">
						<image :src="item.imgUrl" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="services">
			<view class="ser" @click="gotoRegistrationList">
				<view class="img">
					<image src="../../static/hospitalImg/list.png" mode=""></image>
				</view>
				<view class="txt">
					预约列表
				</view>
			</view>
			<view class="ser" @click="gotoReservation">
				<view class="img">
					<image src="../../static/hospitalImg/gua.png" mode=""></image>
				</view>
				<view class="txt">
					按科室挂号
				</view>
			</view>
			<view class="ser" @click="gotoMedicalCard">
				<view class="img">
					<image src="../../static/hospitalImg/card.png" mode=""></image>
				</view>
				<view class="txt">
					就诊卡
				</view>
			</view>
		</view>
		
		<uni-section title="医院列表" type="line">
				<view class="hospital" v-for="(item) in hospitalList" :key="item.id" @click="toHospitalInfo(item.id)">
					<view class="img">
						<image :src="item.imgUrl" mode=""></image>
					</view>
					<view class="txt">
						<view class="name">
							{{item.hospitalName}}
						</view>
						<view class="level">
							<image v-for="(i) in item.level" :key="i" src="../../static/star.png" mode=""></image>
						</view>
						<view class="brief">
							{{item.brief}}
						</view>
					</view>
				</view>
		</uni-section>
		
	</view>
</template>

<script setup lang="ts">
import { onMounted,ref } from "vue";
import {getHospitalList,getHospitalBanner} from '../../api/hospitalApi.js';
import {hospitalBanner,mockHospitalList} from '../../mock/hospital.js';
import{baseurl} from '../../api/request.js';
const hospitalList:any = ref([]);
const keyword:any = ref('请输入医院名称');
const banners:any = ref([]);
const indicatorDots:any = true;
const autoplay:any = true;
const interval:any = ref(2000);
const duration:any = ref(500);

const gotoReservation = ()=>{
	uni.navigateTo({
		url:'./reservation/reservation'
	})
}
	
const gotoRegistrationList = ()=>{
	uni.navigateTo({
		url:'./registrations/registrations'
	})
}

const gotoMedicalCard = ()=>{
	uni.navigateTo({
		url:'./MedicalCard/MedicalCard'
	})
}

const toHospitalInfo = (id:any)=>{
	console.log("id:",id);
	uni.navigateTo({
		url:'/pages/outpatient/hospitalInfo/hospitalInfo?id='+id
	})
}

const removeHtmlTags = (text:any)=>{//将html标签里的字符串取出
    return text.replace(/<[^>]*>/g, '');
}

onMounted(async ()=>{
	console.log(baseurl);
	// let token:any = uni.getStorageSync("token");//获取token
	// console.log("token:=>",token);
	let res = await getHospitalList();//发请求获取医院列表
	let res2 = await getHospitalBanner(1);
	console.log("res2:",res2);
	console.log("获取医院信息的res=>",res);
	if(res.code == 200){
		let hlist = res.rows.map((item:any)=>{
			item.imgUrl= baseurl + item.imgUrl;
			item.brief = removeHtmlTags(item.brief);
			return item;
		});
		hospitalList.value = hlist;
	}else{
		hospitalList.value = mockHospitalList().rows
	}
	
	
	if(res2.code == 200){
		banners.value = res2.data.map((item:any)=>{
			item.imgUrl = baseurl + item.imgUrl;
			return item
		}).slice(0,9);
	}else{
		console.log('hhhhh');
		banners.value = hospitalBanner().data
	}
	
	
	console.log("banners:",banners.value);
	console.log(hospitalList.value);
})

</script>

<style lang="scss">
	.services{
		width: 100%;
		height: 300rpx;
		display: flex;
		box-sizing: border-box;
		padding: 20rpx;
		justify-content: space-around;
		background: linear-gradient(to right,  rgba(18,139,204,.5) 0%,rgba(0,206,154,.5) 100%); 

	}
	.services .ser{
		width: 40%;
		height: 100%;
		text-align: center;
	}
	.services .ser .img{
		display: inline-block;
		width: 80%;
		height: 70%;
	}
	.services .ser image{
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
	.services .ser .txt{
		width: 100%;
		height: 30%;
		font-size: 16px;
		font-weight: 600;
	}
	
	.search{
		width: 100%;
		margin: 10px 0;
	}
	.hospital{
		width: 100%;
		height: 260rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 20rpx 0;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 16rpx;
	}
	.hospital .img{
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}
	.hospital .img image{
		display: block;
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	.txt{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0 10rpx;
	}
	.txt .name{
		width: 100%;
		font-size: 18px;
		line-height: 24px;
		color: #000;
	}
	.txt .level{
		width: 100%;
		height: 40rpx;
		display: flex;
		align-items: center;
		margin: 20rpx 0 10rpx;
	}
	.txt .level image{
		width: 36rpx;
		height: 36rpx;
	}
	.txt .brief{
		width: 100%;
		color: #525252;
		font-size: 14px;
		line-height: 18px;
		/*超出隐藏*/
		overflow: hidden;
		/*超出显示省略号*/
		text-overflow: ellipsis;
		/*适配吧？不知道*/
		display: -webkit-box;
		/*让文本3行显示*/
		-webkit-line-clamp: 2;
		/*适配吧？不知道*/
		-webkit-box-orient: vertical;
	}
	
	.uni-margin-wrap {
		width: 100%;
		margin-bottom: 20rpx;
	}
	
	.swiper {
		height: 400rpx;
	}
	
	.swiper-item {
		width: 100%;
		height: 100%;
		display: block;
		height: 400rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-item image{
		width: 100%;
		height: 100%;
	}
	
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}


</style>
